import { history } from 'umi';

import { Layout, Menu } from 'antd';
import css from './layouts.less'

import {
    AppstoreOutlined,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    PieChartOutlined,
    DesktopOutlined,
    ContainerOutlined,
    MailOutlined,
} from '@ant-design/icons';

export default (props) => {
    const { Header, Content, Sider } = Layout;
    const routes = props.routes[0].routes

    console.log(props.location.pathname)

    return (
        <Layout className={css.layout} >
            <Header className={css.header}>
                <Menu
                    theme="dark"
                    mode="horizontal"
                    selectedKeys={[props.location.pathname]}
                >
                    {routes.map(route =>
                        'title' in route ?
                            <Menu.Item key={route.path}
                                onClick={() => {
                                    history.push(route.path)
                                }}
                            >
                                {route.title}
                            </Menu.Item>
                            : null
                    )}
                </Menu>
            </Header>
            <Layout className={css.main_layout}>
                {/* <Sider className={css.sider} collapsible width={160}>
                    <Menu
                        defaultSelectedKeys={['1']}
                        defaultOpenKeys={['sub1']}
                        mode="inline"
                        theme="dark"
                    >
                        {routes.map((route, rid) =>
                            route.hasOwnProperty('routes') ?
                                <SubMenu key={rid} icon={<MailOutlined />} title={route.title}>
                                    {route.routes.map((r, i) =>
                                        <Menu.Item key={`${rid}_${i}`}onClick={()=>{
                                            history.push(r.path)
                                        }}>{r.title}</Menu.Item>
                                    )}
                                </SubMenu>
                                :
                                <Menu.Item key={rid} icon={<PieChartOutlined />}
                                onClick={()=>{
                                    history.push(route.path)
                                }}
                                >
                                    {route.title}
                                </Menu.Item>
                        )}
                    </Menu>
                </Sider> */}
                <Content id="content" className={css.content}>
                    {props.children}
                </Content>

            </Layout>
        </Layout>
    )
}
